import React, { Component } from 'react';
import { View, Text, StatusBar, NativeModules, NativeEventEmitter, AsyncStorage, DeviceEventEmitter } from 'react-native';
import { Container, Header, Body, Thumbnail, List, Button, ListItem, Right, Title } from 'native-base'
import BaseHeader from '../../Views/BaseHeader'

import Icon from '../../src/iconfont/Icon'
import { Use } from 'react-native-svg';

const vm = NativeModules.SYMyCenterVCViewModel

const nativeBridge = NativeModules.BaseViewModel
let basevm = new NativeEventEmitter(nativeBridge)

export default class MyCenter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: undefined
        };
    }

    componentDidMount() {
        DeviceEventEmitter.addListener('LoginSuccess', () => {
            this.refresfUserInfo()
        })
        this.refresfUserInfo()
    }

    refresfUserInfo() {
        AsyncStorage.getItem('UserInfo').then(json => {
            let user = JSON.parse(json)
            this.setState({ userInfo: user })
        })
    }

    cellClick = (index) => {
        switch (index) {
            case 0:
                {

                    vm.pushvc('WZGProtocolListVC', { title: '服务与协议' })
                }
                break;

            case 1:
                {
                    vm.pushvc('WZGAddressListVC', { title: '地址管理', isNormal: true })
                }
                break;

            case 2:
                {
                    vm.pushwebvc('ZCWebVC', '关于我们', '/simple/aboutUs/index.html', false)
                }
                break;

            case 3:
                {
                    vm.pushvc('WZGSettingVC', null)
                }
                break;

            case 4:
                {
                }
                break;

            default:
                break;
        }
        // this.props.navigation.push('MyCenter2')
    }
    renderCell = (list) => {
        console.log(list)
        let arr = []
        list.map((obj, index) => {
            arr.push(
                <ListItem key={index} onPress={this.cellClick.bind(this, index)} underlayColor={'rgba(0,0,0,0)'}>
                    <View style={{ width: '100%', backgroundColor: '#ffffff', justifyContent: 'space-between', padding: 10, flexDirection: 'row', alignItems: 'center' }}>
                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <Icon name={obj.icon} size={30} color={'#333333'} />
                            <Text style={{ color: '#333333', fontSize: 18, marginLeft: 15 }}>{obj.name}</Text>
                        </View>
                        <Icon name='jiantou' color={'#999999'}></Icon>
                    </View>
                </ListItem>
            )
        })
        return arr;
    }
    exitBtnClick = () => {
        AsyncStorage.removeItem('UserInfo').then(() => {
            vm.exit()
            this.setState({ userInfo: undefined })
        })
    }
    rouleName = () => {
        let { userInfo } = this.state
        let type = userInfo.member.type
        if (type > 1) {
            return "店主"
        } else {
            return "会员"
        }
    }

    render() {
        let { userInfo } = this.state

        let infoView = (userInfo == undefined ? <View /> :
            <View
                style={{
                    marginTop: 10, backgroundColor: '#ffffff', padding: 10, marginRight: 30, borderTopRightRadius: 105, borderBottomRightRadius: 105,
                    shadowColor: '#000000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.2, shadowRadius: 3
                }}>
                <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', }}>
                    <Thumbnail large source={{ uri: userInfo.memberProfile.avatar }} style={{ marginRight: 10, backgroundColor: '#f1f1f1' }} />
                    <Text style={{ fontSize: 21 }}>{userInfo.memberProfile.nickname}</Text>
                    <View style={{ marginLeft: 5, padding: 3, borderRadius: 5, backgroundColor: '#ff0000', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ fontSize: 12, color: 'white' }}>{this.rouleName()}</Text>
                    </View>
                </View>
            </View>
        )

        let list = [
            { icon: 'weizhegou-geren-xieyitiaokuan', name: '协议' },
            { icon: 'dizhi21', name: '地址管理' },
            { icon: 'guanyuwomen', name: '关于我们' },
            { icon: 'shezhix', name: '设置' },
        ];
        return (
            <Container style={{ flex: 1, backgroundColor: "#ffffff", display: 'flex', flexDirection: "column" }}>
                <StatusBar barStyle="light-content"></StatusBar>
                <Header span style={{ backgroundColor: 'red' }}>
                    <Body>
                        <BaseHeader title={'我的'} />
                    </Body>
                    <Right>
                        <Button transparent onPress={this.exitBtnClick}>
                            <Text style={{ color: '#ffffff' }}>{'退出'}</Text>
                        </Button>
                    </Right>
                </Header>

                <View style={{ flex: 1 }}>
                    {/* 个人信息 */}
                    {infoView}

                    <List style={{ marginTop: 10, flex: 1, backgroundColor: '#ffffff' }}>
                        {
                            this.renderCell(list)
                        }
                    </List>
                </View>
            </Container>
        );
    }
}